<template>
	<view class="kui-actionsheet">
		<kui-popup ref="popupActionsheet" :close-on-click-mask="state.closeOnClickOverlay" height="200rpx" position="bottom" @close="closedPopup">
			<view v-if="title">
				<view class="kui-py-3 kui-flex kui-flex-col kui-justify-center kui-items-center kui-border-0 kui-border-b-rpx kui-border-solid kui-border-gray-200" @click.stop>
					<kui-text :color="getItemColor({})">{{ title }}</kui-text>
					<view class="kui-text-gray-400" v-if="description">
						<view class="kui-mt-1"></view>
						<kui-text>{{ description }}</kui-text>
					</view>
				</view>
			</view>
			<template v-for="(item, index) in actions" :key="index">
				<view class="kui-py-3 kui-flex kui-flex-col kui-justify-center kui-items-center" :hover-class="(item.disable || item.loading) ? '' : 'kui-bg-gray-200'" :class="[item.disable ? 'disable' :'']" :style="[itemStyle(index)]" @click.stop="onChoose(item)">
					<kui-text :color="getItemColor(item)" :mode="mode" v-if="!item.loading">{{ item.name }}</kui-text>
					<kui-animation name="rotate-center" :duration="1" runing infinite v-else>
						<kui-icons type="spinner6" :size="36" color="grey"></kui-icons>
					</kui-animation>
					<view class="kui-text-gray-400" v-if="item.description">
						<view class="kui-mt-1"></view>
						<kui-text>{{ item.description }}</kui-text>
					</view>
				</view>
			</template>
			<view v-if="cancelText">
				<view class="kui-w-full kui-h-2" :style="{
					backgroundColor: theme.colors[state.mode]['grey'][2]
				}"></view>
				<view class="kui-py-3 kui-flex kui-justify-center kui-items-center" hover-class="kui-bg-gray-200" @click="closeOverlay">
					<kui-text :color="getItemColor({})">{{ cancelText }}</kui-text>
				</view>
			</view>
		</kui-popup>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		defineComponent,
		watch,
		SetupContext,
		getCurrentInstance,
		CSSProperties,
		computed,
		onMounted
	} from 'vue';
	
	import ActionsheetProps from './props';
	
	const name = 'kui-actionsheet';
	
	export default  defineComponent({
		name,
		props: ActionsheetProps,
		emits: ['update:show', 'choose'],
		setup(props, context: SetupContext) {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			const state = reactive({
				closeOnClickOverlay: props.closeOnClickOverlay,
				itemBackgroundColor: 'white',
				mode: props.mode
			});
			
			const itemStyle = (i) => {
				const style: CSSProperties = reactive({});
				
				style.backgroundColor = state.itemBackgroundColor;
				
				if (i >= 0 && props.actions.length && i < props.actions.length-1) {
					style.borderBottom = `1rpx solid ${theme.colors[state.mode]['grey'][2]}`;
				}
				
				if (i === 0 && !props.title) {
					style.borderTopLeftRadius = style.borderTopRightRadius = `${theme.size.radiusSize['base']}rpx`;
				}
				
				return style;
			}
			
			watch(
				() => [props.show],
				(newVal) => {
					if (newVal[0]) {
						if (props.actions.length < 2) {
							console.warn('actionsheet-debug: actions配置错误');
							return false;
						}
						proxy.$refs['popupActionsheet'].open();
					}
				}
			);
			
			const closeOverlay = () => {
				proxy.$refs['popupActionsheet'].forceClose();
			}
			
			const closedPopup = () => {
				context.emit('update:show',  false);
			}
			
			const onChoose = (item: any) => {
				if (item.disable || item.loading) {return false;}
				proxy.$refs['popupActionsheet'].forceClose();
				context.emit('choose', item);
			}
			
			const getItemColor = (item: any) => {
				let color: string = item.color;
				
				if (props.chooseItemValue === item.name) {
					color = props.chooseItemColor ? props.chooseItemColor : theme.colors[state.mode]['primary'][5];
				}
				
				if (state.mode === 'dark') {
					if (props.chooseItemValue === item.name) {
						color = theme.colors['dark'][props.chooseItemColor][5];
					} else {
						color = theme.colors['dark']['grey'][8];
					}
				}
				
				if (item.disable) {
					color = theme.colors[state.mode]['grey'][9];
				}
								
				return color;
			}
			
			const changeMode = () => {
				if (state.mode === 'light') {
					state.itemBackgroundColor = 'white';
				}
				if (state.mode === 'dark') {
					state.itemBackgroundColor = theme.colors[state.mode]['grey'][1];
				}
			};
			
			onMounted(() => {
				changeMode();
			})
			
			uni.$on("changeMode", (e) => {
				state.mode = e;
				changeMode();
			});
			
			return {
				itemStyle,
				closedPopup,
				onChoose,
				closeOverlay,
				getItemColor,
				state,
				theme
			}
		}
	});
</script>

<style lang="less">
	.disable {
		opacity: 0.2;
		cursor: not-allowed;
	}
</style>